<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '订单结算',
  },
}
</route>

<script lang="ts" setup>
// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

function back() {
  uni.navigateBack()
}

const order = ref({
  merchant: 'XXX店',
  img: 'https://img.meituan.net/csc/792f73808d45c47b28c40de1548f11621228590.jpg',
  name: 'xxx服饰',
  amount: 2,
  content: [
    {
      name: 'xxx服装',
      amount: 2,
      price: 80.00,
    },
    {
      name: 'xxx道具',
      amount: 4,
      price: 90.00,
    },
  ],
})

// 商品总价
const sum = computed(() => {
  let total = 0
  order.value.content.forEach((item) => {
    total += item.amount * item.price
  })
  return total
})
// 商品总量
const total = computed(() => {
  let total = 0
  order.value.content.forEach((item) => {
    total += item.amount
  })
  return total
})

// 订单备注
const notes = ref<string>('')

function pay() {
  uni.showToast({
    title: '支付成功',
    icon: 'none',
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 1000)
}
</script>

<template>
  <view class="box-border min-h-[100vh] overflow-hidden bg-[#f4f4f4] pb-30">
    <!-- 导航栏 -->
    <view class="fixed top-0 z-20 w-full bg-white transition-all duration-300">
      <view class="bg-white" :style="{ height: `${safeAreaInsets?.top}px` }" />
      <view class="h-11 flex items-center bg-white px-4">
        <wd-icon name="thin-arrow-left" size="22px" @click="back" />
        <h1 class="flex-1 truncate px-6 text-lg text-gray-800 font-medium">
          订单结算
        </h1>
      </view>
    </view>
    <!-- 间隔占位 -->
    <view class="pt-5" :style="{ marginTop: `${safeAreaInsets?.top + 44}px` }">
      <!-- 商品卡片区域 -->
      <wd-card :title="order.merchant">
        <view class="h-20 flex">
          <image :src="order.img" mode="aspectFill" class="mr-24rpx h-22 w-22 rounded-md" />
          <view class="w-70%">
            <view class="flex justify-between text-32rpx text-black">
              <view>{{ order.name }}</view>
              <view> ￥ {{ sum / order.amount }} </view>
            </view>
            <view
              v-for="(item, index) in order.content" :key="index"
              class="mt-1 flex justify-between text-28rpx text-gray"
            >
              <view>{{ item.name }}</view>
              <view> x{{ item.amount }} </view>
            </view>
          </view>
        </view>
        <template #footer>
          <view class="my-3">
            <text class="text-26rpx text-gray">
              共{{ total }}件
            </text>
            <text>
              总计￥
              <text class="ml-[-10rpx] text-40rpx">
                {{ sum }}
              </text>
            </text>
          </view>
        </template>
      </wd-card>
      <view class="h-30rpx" />
      <!-- 订单备注区域 -->
      <wd-card title="订单备注" class="mt-5">
        <wd-textarea v-model="notes" :maxlength="100" placeholder="若有特别要求,请与商家协商后备注(最多100字)" />
      </wd-card>
    </view>
    <!-- 底部支付栏 -->
    <view
      class="fixed bottom-0 z-6 box-border h-20 w-100% flex items-center justify-between rounded-tl-2xl rounded-tr-2xl bg-white p-3"
      style="box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);"
    >
      <view>
        <text class="text-26rpx text-gray">
          共{{ total }}件
        </text>
        <text>
          总计￥
          <text class="ml-[-10rpx] text-40rpx">
            {{ sum }}
          </text>
        </text>
      </view>
      <view
        class="h-70% w-40% flex items-center justify-center rounded-lg bg-[linear-gradient(to_right,#e0cebd,#bfa189)] from-[#f8f0eb] to-[#e7d3c3] text-white"
        @click="pay"
      >
        立即支付
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
